<template>
  <view>
    <xiri-todo-tabbar @tabSwitch="tabSwitch"></xiri-todo-tabbar>
    <view>
      <todo-list
        v-if="currentPage == 0"
        :height="height"
        ref="todoList"
      ></todo-list>
      <calendar v-if="currentPage == 2" :height="height" ref="calendar">
      </calendar>
      <van-popup
        :show="popupShow"
        position="bottom"
        custom-style="height: 80%;"
        @close="popupClose"
        round
      >
        <add-panel v-if="popupShow" @addFinish="popupClose"></add-panel>
      </van-popup>
    </view>
  </view>
</template>

<script>
import { xiriTodoTabbar } from './components/xiri-todo-tabbar/xiri-todo-tabbar';
import { todoList } from './components/todo/todo';
import { addPanel } from './components/addPanel/addPanel';
import { calendar } from './components/calendar/calendar';
export default {
  components: {
    xiriTodoTabbar,
    todoList,
    addPanel,
    calendar,
  },
  data() {
    return {
      currentPage: 0,
      popupShow: false,
      height: 0,
    };
  },
  methods: {
    tabSwitch(e) {
      if (e == 1) {
        this.popupShow = true;
      } else {
        this.currentPage = e;
      }
      console.log(e);
    },
    popupClose() {
      this.popupShow = false;
      let oldCurrentPage = this.currentPage;
      this.currentPage = 5;
      this.currentPage = oldCurrentPage;
      if (this.currentPage == 0) {
        this.$refs.todoList.init();
      } else {
        this.$refs.todoList.initData();
      }
    },
  },
  created() {
    var info = uni.getSystemInfoSync();
    var height = info.windowHeight - 50;
    this.height = height;
    console.log(height);
  },
};
</script>
<style>
.nav-bar {
  margin-top: 0px;
}
</style>
<style scoped></style>
